<template>
  <view class="login-page">
    <!-- 登录容器 -->
    <view class="login-container">
      <!-- logo区域 -->
      <view class="logo">
        <image src="/static/logo.png" mode="widthFix"></image>
      </view>

      <!-- 表单区域 -->
      <view class="form-box">
        <!-- 用户名输入 -->
        <view class="input-item">
          <view class="icon">
            <uni-icons type="person" size="24" color="#999"></uni-icons>
          </view>
          <input 
            type="text" 
            v-model="username" 
            placeholder="请输入用户名" 
            placeholder-class="placeholder"
          />
        </view>

        <!-- 密码输入 -->
        <view class="input-item">
          <view class="icon">
            <uni-icons type="locked" size="24" color="#999"></uni-icons>
          </view>
          <input 
            type="password" 
            v-model="password" 
            placeholder="请输入密码" 
            placeholder-class="placeholder"
          />
        </view>

        <!-- 忘记密码 -->
        <view class="forget-link">
          <text @click="goForget">忘记密码？</text>
        </view>

        <!-- 登录按钮 -->
        <button 
          class="login-btn" 
          :disabled="isDisabled" 
          @click="handleLogin"
        >
          登录
        </button>

        <!-- 注册入口 -->
        <view class="register-area">
          <text>还没有账号？</text>
          <text class="register-link" @click="goRegister">立即注册</text>
        </view>

        <!-- 其他登录方式 -->
        <view class="other-login">
          <text class="line"></text>
          <text class="text">其他登录方式</text>
          <text class="line"></text>
        </view>
        <view class="social-login">
          <view @click="wechatLogin">
            <uni-icons type="weixin" size="40" color="#07C160"></uni-icons>
          </view>
          <view @click="phoneLogin">
            <uni-icons type="phone" size="40" color="#1296db"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '', // 用户名
      password: '', // 密码
      isDisabled: false // 登录按钮是否禁用
    };
  },
  onLoad() {
    // 页面加载时可读取本地缓存的账号（可选）
    const userInfo = uni.getStorageSync('userInfo');
    if (userInfo && userInfo.username) {
      this.username = userInfo.username;
    }
  },
  methods: {
    // 处理登录逻辑
    handleLogin() {
      // 简单验证
      if (!this.username) {
        return uni.showToast({ title: '请输入用户名', icon: 'none' });
      }
      if (!this.password) {
        return uni.showToast({ title: '请输入密码', icon: 'none' });
      }

      this.isDisabled = true; // 防止重复点击
      
      // 模拟登录请求（实际项目替换为真实接口）
      setTimeout(() => {
        // 登录成功后保存用户信息
        uni.setStorageSync('userInfo', {
          username: this.username,
          token: 'xxx-token-xxx'
        });
        
        // 返回首页或之前的页面
        uni.navigateBack({ delta: 1 }) || uni.reLaunch({ url: '/pages/index/index' });
        
        this.isDisabled = false;
      }, 1000);
    },

    // 跳转到注册页
    goRegister() {
      uni.navigateTo({ url: '/pages/register/register' });
    },

    // 跳转到忘记密码页
    goForget() {
      uni.navigateTo({ url: '/pages/forget/forget' });
    },

    // 微信登录（仅小程序/App有效）
    wechatLogin() {
      uni.showToast({ title: '微信登录功能开发中', icon: 'none' });
      // 实际逻辑：调用 uni.login 获取code，后端验证后登录
    },

    // 手机号登录
    phoneLogin() {
      uni.navigateTo({ url: '/pages/phone-login/phone-login' });
    }
  }
};
</script>

<style scoped>
.login-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-top: 80rpx;
}

.login-container {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* logo样式 */
.logo {
  margin-bottom: 60rpx;
}
.logo image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}

/* 表单样式 */
.form-box {
  width: 100%;
}

/* 输入框样式 */
.input-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 60rpx;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
  height: 90rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.icon {
  margin-right: 20rpx;
  width: 30rpx;
}
.input-item input {
  flex: 1;
  height: 100%;
  font-size: 28rpx;
}
.placeholder {
  color: #ccc;
}

/* 忘记密码 */
.forget-link {
  text-align: right;
  margin: 15rpx 10rpx 30rpx 0;
}
.forget-link text {
  color: #1296db;
  font-size: 26rpx;
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #07c160;
  color: #fff;
  font-size: 32rpx;
  border-radius: 60rpx;
  margin-bottom: 30rpx;
}
.login-btn[disabled] {
  background-color: #a5e6ba;
}

/* 注册区域 */
.register-area {
  text-align: center;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 60rpx;
}
.register-link {
  color: #1296db;
  margin-left: 10rpx;
}

/* 其他登录方式 */
.other-login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 40rpx;
}
.line {
  flex: 1;
  height: 1rpx;
  background-color: #eee;
}
.text {
  padding: 0 20rpx;
  color: #999;
  font-size: 24rpx;
}

/* 社交登录图标 */
.social-login {
  display: flex;
  justify-content: center;
  gap: 60rpx;
}
</style>